<!--
 * @Author: maqaing
 * @Date: 2021-10-24 14:49:23
 * @LastEditors: maqiang
 * @LastEditTime: 2021-10-29 10:02:28
 * @Description: 
-->
<template>
  <div>
    <!-- 顶部的组建 -->
    <el-form :inline="true" :model="input" class="demo-form-inline">
      <el-form-item label="状态">
        <el-select v-model="input.status" placeholder="状态" clearable>
          <el-option label="审核通过" value="审核通过"></el-option>
          <el-option label="未审核" value="未审核"></el-option>
          <el-option label="审核不通过" value="审核不通过"></el-option>
          <el-option label="推荐" value="推荐"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="input.title" placeholder="标题" clearable></el-input>
      </el-form-item>
      <el-form-item label="选择栏目">
        <el-select v-model="input.id" placeholder="选择栏目" clearable>
          <el-option
            v-for="(item, index) in column"
            :key="index"
            :label="item.category.name"
            :value="item.category.id"
            >{{ item.category.name}}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格的数据渲染 -->
    <el-table :data="AritcleData.list" style="width: 100%">
      <el-table-column type="index" label="序号" width="180"> </el-table-column>
      <el-table-column label="封面" width="180">
        <template v-slot="scope">
          <img :src="scope.row.cover" alt="" height="50px" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="风采"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.status == '审核通过'">{{
            scope.row.status
          }}</el-tag>
          <el-tag type="danger" v-if="scope.row.status == '未审核'">{{
            scope.row.status
          }}</el-tag>
          <el-tag type="primary" v-if="scope.row.status == '推荐'">{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template v-slot="scope">
          <el-tag type="success" @click="toRecommend(scope.row)">推荐</el-tag>
          <el-tag type="info" @click="toCheck(scope.row.id)">审核</el-tag>
          <el-tag type="error">删除</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="AritcleData.total"
    >
    </el-pagination>
    <!-- 审核模态框 -->
    <el-dialog
      :title="checkdata.title"
      :visible.sync="checkdiglog"
      width="50%"
      center
    >
      <span v-html="checkdata.content">{{ checkdata.content }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="toPassRecommend(checkdata)"
          >审核通过</el-button
        >
        <el-button type="danger" @click="toNoRecommend(checkdata)"
          >审核不通过</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
import qs from "qs";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      // 风采信息获取
      AritcleData: [],
      // 分页查询信息
      params: {
        page: 1,
        pageSize: 5,
      },
      // 审核内容信息
      checkdata: {},
      // 审核模态框
      checkdiglog: false,
      // 输入框
      input: {},
      // 解构风采
    };
  },
  computed: {
    ...mapState("webCloumn", ["column"]),
  },
  methods: {
    ...mapActions("webCloumn", ["FindAllColum"]),
    // 分页多条件获取学生风采信息
    getArticlePageQuery() {
      request
        .get("/article/pageQuery", {
          params: {
            page: this.params.page,
            pageSize: this.params.pageSize,
          },
        })
        .then((res) => {
          // console.log(res)
          this.AritcleData = res.data;
        });
    },
    // 改变当前页面的信息的数量
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.getArticlePageQuery();
      // console.log(a);
      // console.log(pageSize);
      // request
      //   .get("/article/pageQuery", {
      //     params: {
      //       page: 1,
      //       pageSize,
      //     },
      //   })
      //   .then((res) => {
      //     this.AritcleData = res.data;
      //   });
    },
    // 当前页的改变
    handleCurrentChange(page) {
      // console.log(page);
      this.params.page = page;
      this.getArticlePageQuery();
      // request
      //   .get("/article/pageQuery", {
      //     params: {
      //       page,
      //       pageSize: this.params.pageSize,
      //     },
      //   })
      //   .then((res) => {
      //     this.AritcleData = res.data;
      //   });
    },
    // 推荐栏目
    toRecommend(content) {
      // console.log(content);
      this.$confirm("您确定要推荐此资讯吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          request
            .post(
              "/article/changeStatus",
              qs.stringify({ id: content.id, status: "推荐" })
            )
            .then(() => {
              this.getArticlePageQuery();
            });

          this.$message({
            type: "success",
            message: "推荐成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取推荐",
          });
        });
    },
    // 审核栏目
    toCheck(id) {
      // console.log(id);
      // console.log(e.target.innerText);
      this.checkdiglog = true;
      request.get("/article/findById", { params: { id } }).then((res) => {
        this.checkdata = res.data;
        // console.log(res.data.title);
      });
    },
    // 审核通过
    toPassRecommend(c) {
      // console.log(c.id);
      request
        .post(
          "/article/changeStatus",
          qs.stringify({ id: c.id, status: "审核通过" })
        )
        .then(() => {
          this.checkdiglog = false;
          this.getArticlePageQuery();
        });
    },
    // 审核不通过
    toNoRecommend(a) {
      request
        .post(
          "/article/changeStatus",
          qs.stringify({ id: a.id, status: "未审核" })
        )
        .then(() => {
          this.checkdiglog = false;
          this.getArticlePageQuery();
        });
    },
    // 查询按钮
    onSubmit() {
      request.get('/article/pageQuery',{
        params:{
          page:this.params.page,
          pageSize:this.params.pageSize,
          title:this.input.title,
          status:this.input.status,
          categoryId:this.input.id,
        }
      }).then((res)=>{
        this.AritcleData=res.data;
      })

    },
  },
  created() {
    // 执行函数
    this.getArticlePageQuery();
    this.FindAllColum();
  },
};
</script>
<style scoped>

</style>